<template>
	<view class="project_jd">
		<u-navbar
			ref="navbar"	
			back-icon-name="arrow-leftward" 
			title="项目进度"
			:background="{
				background: '#5C77FF',
			}"
			title-color="#ffffff"
			back-icon-color="#ffffff">
		</u-navbar>
		<view 
			class="content"
			:style="{
				height:`calc(100% - ${navbarHeight}px)`,
			}">
			<view class="content_title">
				{{projectInfo.title}}
			</view>
			<view class="content_top">
				<Project_jd_tabs_cp :dqjd="current" @change="changeJD($event)" :state='state'>
				</Project_jd_tabs_cp>
			</view>
			<view class="content_bottom">
				<keep-alive>
					<!-- <Project_jd_detail 
						:title='title' 
						:projectInfo='projectInfo' 
						:currentIndex='current' 
						@changeCurrentIndex="changeCurrentIndex($event)"
						@getState="getState($event)"
						></Project_jd_detail> -->
					<Qqgz_cp :title='title' :projectInfo='projectInfo' :currentIndex='current' :state="state" v-if="current == 0" 
							@changeCurrentIndex="changeCurrentIndex($event)"></Qqgz_cp>
					<Ssjd_cp :title='title' :projectInfo='projectInfo' :currentIndex='current' :state="state" v-if="current == 1"
							@changeCurrentIndex="changeCurrentIndex($event)"></Ssjd_cp>
					<Jgjd_cp :title='title' :projectInfo='projectInfo' :currentIndex='current' :state="state" v-if="current == 2"
							@changeCurrentIndex="changeCurrentIndex($event)"></Jgjd_cp>
					<Jsjd_cp :title='title' :projectInfo='projectInfo' :currentIndex='current' :state="state" v-if="current == 3"
							@changeCurrentIndex="changeCurrentIndex($event)"></Jsjd_cp>
					<Yjqk_cp :title='title' :projectInfo='projectInfo' :currentIndex='current' :state="state" v-if="current == 4"
							@changeCurrentIndex="changeCurrentIndex($event)"></Yjqk_cp>
					<Xypg_cp :title='title' :projectInfo='projectInfo' :currentIndex='current' :state="state" v-if="current == 5"
							@changeCurrentIndex="changeCurrentIndex($event)"></Xypg_cp>
				</keep-alive>
			</view>
		</view>
	</view>
</template>

<script>
	import {_get_system_info} from "@/my_tools/tools.js"
	import Wzg_simple_head from "@/components/my_components/public_cp/wzg_simple_head.vue"
	import Project_jd_tabs_cp from "@/components/my_components/project_jd_cp/project_jd_tabs_cp.vue"
	import Project_jd_detail from "@/components/my_components/project_jd_cp/projrct_jd_detail.vue"
	import Qqgz_cp from "@/components/my_components/project_jd_cp/qqgz_cp.vue"
	import Ssjd_cp from "@/components/my_components/project_jd_cp/ssjd_cp.vue"
	import Jgjd_cp from "@/components/my_components/project_jd_cp/jgjd_cp.vue"
	import Jsjd_cp from "@/components/my_components/project_jd_cp/jsjd_cp.vue"
	import Yjqk_cp from "@/components/my_components/project_jd_cp/yjqk_cp.vue"
	import Xypg_cp from "@/components/my_components/project_jd_cp/xypg_cp.vue"
	export default { //项目推进页面
		components: {
			Wzg_simple_head,
			Project_jd_tabs_cp,
			Project_jd_detail,
			Qqgz_cp,
			Ssjd_cp,
			Jgjd_cp,
			Jsjd_cp,
			Yjqk_cp,
			Xypg_cp,
		},
		data() {
			return {
				navbarHeight:68,  //默认为68px
				system_info:null,
				projectInfo: {},
				current: 0,
				title: '前期工作',
				state: '',
			}
		},
		created(){
			this.system_info = _get_system_info(uni);
		},                                                                                                        
		onLoad(option) {
			this.projectInfo = JSON.parse(option.item)
		},
		mounted(){
			this.navbarHeight = this.$refs.navbar.navbarHeight + this.$refs.navbar.statusBarHeight;
			this.getState();
		},
		methods: {
			changeJD(data) {
				this.current = data.index
				this.title = data.item
			},
			changeCurrentIndex(data) {
				this.current = data
				this.getState()
			},
			getState() {
				this.$ajax({
					url: `/wx/project/${this.projectInfo.id}`,
					method: 'GET',
					success: res => {
						console.log(res)
						this.state = res.data.data.state
					}
				});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.project_jd {
	height: 100vh;
	.content {
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: stretch;
		>.content_title {
			font-size: 20px;
			padding: 0 10px;
			box-sizing: border-box;
			margin-top: 10px;
		}
		>.content_top{
			padding: 0 10px;
			box-sizing: border-box;
			border-bottom: 1px solid #d9d9d9;
		}
		>.content_bottom{
			padding: 10px 0;
			height: 100%;
			overflow-y: auto;
		}
	}
}
</style>
